import React, { useEffect, useState,useRef } from 'react';

// 引入页头组件
import Pageheader from '@/components/Pageheader';
import { Button, Table, Space, Tag,message } from 'antd';
// 引入用户相关接口
import { getuserlist,deluserFn } from '@/api/user';
// 引入模态框组件
import Mymodal from '@/components/Mymodal';

// 引入分页组件
import Mypagniation from '@/components/Mypagniation';


const Index = () => {
	// 定义列
	const columns = [
		{
			title: '序号',
			dataIndex: 'id',  // 表示该列数据中对应哪一个字段
			key: 'id',
			// render: (text) => <a>{text}</a>,
		},
		{
			title: '用户名',
			dataIndex: 'username',
			key: 'id',
		},
		{
			title: '手机号',
			dataIndex: 'mobile',
			key: 'id',
		},
		{
			title: '邮箱',
			dataIndex: 'email',
			key: 'id',
		},
		{
			title: '性别',
			key: 'id',
			dataIndex: 'gender',
			render: (tags) => {
				// tage就是该列数据对象中对应gender的value值
				let color = tags
				let sex = ''
				switch (color) {
					case '1':
						color = 'error'
						sex = '男'
						break;
					case '2':
						color = 'success'
						sex = '女'
						break;
					case '3':
						color = 'warning'
						sex = '保密'
						break;
					default:break;	
				}
				return <Tag color={color}>
					{sex}
				</Tag>
			},
		},
		{
			title: '状态',
			key: 'id',
			dataIndex: 'status',
			render: (tags) => {
				
				return <Tag color={tags===1?'success':'error'}>
					{tags === 1?'正常':'禁用'}
				</Tag>
			},
		},
		{
			title: '操作',
			key: 'id',
			render: (_, record) => (
				<Space size="middle">
					<Button type='primary' onClick={()=>{editUserFn(record)}}>编辑</Button>
					<Button type='primary' danger onClick={()=>{deletuserFn(record)}}>删除</Button>	
				</Space>
			),
		},
	];

	// 定义数据列表相互据请求
	const [page, setPage] = useState(1)
	const [userlist,setuserlist] = useState([])
	// 设置总的数据条数
	const [total,setTotal] = useState(0)
	useEffect(() => {
		getuserlistFn({page})
	},[page])

	// 请求用户列表
	const getuserlistFn =(params) =>{
		getuserlist(params).then((res) => {
			console.log('00',res);
			if(res.data.errNo===0){
				setuserlist(res.data.paginate.data)
				setTotal(res.data.paginate.total)
			}
		})
	}

	// 添加功能
	const ref1 = useRef()
	const addUserFn = () => {
		// 显示模态框
		ref1.current.showModal()
		console.log('ref1',ref1);
		// 修改模态框标题
		ref1.current.setTitle('添加')
	}

	// 编辑用户列表
	const editUserFn = (record) =>{
		// 01：显示模态框
		ref1.current.showModal()
		// 02：修改模态框标题
		ref1.current.setTitle('编辑')
		// 03：进行数据的回填
		console.log('record',record);
		ref1.current.setCurrentUser(record)
	}

	// 删除用户
	const deletuserFn = (record) => {
		deluserFn(record).then((res)=>{
			console.log('del',res);
			if(res.data.errNo===0){
				message.success('删除成功',1,() => {
					// 重新请求数据列表
					getuserlist({page})
				})
			}else{
				message.error(res.data.errText,1)
			}
		})
	}


	return (
		<div>
			{/* 页头标签 */}
			<Pageheader title='用户列表'>
				<Button type='primary' onClick={addUserFn}>添加</Button>
			</Pageheader>
			{/* 展示表格数据 */}
			<Table
				columns={columns}
				pagination={false}
				dataSource={userlist}
				rowKey={(record) => record.id}
			/>
			{/* 模态框组件 */}
			<Mymodal ref={ref1} getuserlistFn={getuserlistFn} page={page}></Mymodal>
			{/* 分页组件 */}
			<Mypagniation page={page} total={total} setPage={setPage}></Mypagniation>
		</div>
	);
}

export default Index;
